<template>
    <div id='myApp'>
        <Row style="margin-bottom: 10px;border-bottom: 1px solid #eeeeee;">
            <Col span="7" style="border-bottom:2px solid #2d8cf0 ;padding: 0 0 8px 2px;">
            <span style="color: #2d8cf0;">
                <Icon class="ivu-icon-dataExplore" />&nbsp;&nbsp;
                <span style="color: black;">数据管理&nbsp;&nbsp;>&nbsp;&nbsp;</span>
                <span style="color: black;">SQL查询&nbsp;&nbsp;>&nbsp;&nbsp;</span>
                可视化探索
            </span>
            </Col>
            <Col span="4" offset="13" style="display: flex;justify-content: flex-end;margin-top: -4px;">
                <Button type="warning" 
                label="small" 
                class="btnOperation"
                @click="jumpPage('/dataDimension')"
                >上一步</Button>
            </Col>
        </Row>
        <Row style="margin-top: 14px;">
            <Col span="16"  class="dimensionContent">
                <div style="margin-bottom: 18px;font-size: 16px;">
                    <Button type="success" 
                    label="small" 
                    class="btnOperation"
                    style="font-size: 12px;"
                    @click="jumpPage('/echart')"
                    >重新选择图标</Button>
                    <span style="padding-left: 14px;color: #515a6d;">图标展示:&nbsp;&nbsp;<span style="color: #0e7fff;">{{iconShowType}}</span></span>
                </div>
                <div id="echart" style="width: 100%;height: 500px;"></div>
            </Col>
            <Col span="7"  offset="1" class="dimensionContent" style="color: #515a6d;">
                <p>基本属性<Icon type="ios-settings" class="setingIcon"/></p>
                <div style="display: flex;margin-top: 20px;">
                    <div style="display: flex;">
                        <span style="width: 59px;font-size: 12px;line-height: 26px;">标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题&nbsp;:</span>
                        <Input v-model="echartType"
                        @blur.native.capture = "selecteChartType('echartType')" 
                        size="small" style="width: 67.8%;"/>
                    </div>
                    <div style="margin-left: auto;min-width: 102px;">
                        <Icon class="direction directionLeft" @click="directionFun('directionLeft')" :class="{'active':direction.directionLeft}"/>
                        <Icon class="direction directionCent" @click="directionFun('directionCent')" :class="{'active':direction.directionCent}"/>
                        <Icon class="direction directionRight" @click="directionFun('directionRight')" :class="{'active':direction.directionRight}"/>
                    </div>
                </div>
                <div style="margin-top: 26px;display: flex;" v-if="legend">
                    <span style="width: 62px;display: inline-block;font-size: 12px;">维度标签&nbsp;:</span>
                    <Col span="19">
                        <Col span="6">
                            
                            <Checkbox v-model="single1" @click.prevent.native="checkboxFun('single1')">无</Checkbox>
                        </Col>
                        <Col span="6" offset="3">
                            <Checkbox v-model="single2" @click.prevent.native="checkboxFun('single2')">水平</Checkbox>
                        </Col>
                        <Col span="6" offset="3">
                            <Checkbox v-model="single3" @click.prevent.native="checkboxFun('single3')">垂直</Checkbox>
                        </Col>
                    </Col>
                </div>
                <div style="margin-top: 26px;display: flex;" v-if="seriesSort">
                    <span style="width: 62px;display: inline-block;font-size: 12px;">排序方式&nbsp;:</span>
                    <Col span="19">
                            <RadioGroup v-model ='disabledSingle'>
                                    <Radio label="descending" >升序</Radio>
                                    <Radio label="ascending" style="margin-left: 39px;">&nbsp;&nbsp;降序</Radio>
                            </RadioGroup> 
                    </Col>
                </div>
                
                <!-- <div style="margin-top: 18px;display: flex;height: 30px;">
                    <p class="perAttr" style="font-size: 12px;">色&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;系&nbsp;&nbsp;:</p>
                    <div class="perAttrCon">
                        <a title="" class="default selected" data-original-title="default">
                            <span></span>
                        </a>
                        <a title="" class="light" data-original-title="light">
                            <span></span>
                        </a>
                        <a title="" class="dark" data-original-title="dark">
                            <span></span>
                        </a>
                    </div>
                </div> -->
                
                <div style="margin-top: 18px;display: flex;height: 30px;" class="displayIconCent">
                    <p class="perAttr" style="font-size: 12px;">主题名称:</p>
                    <div class="selectColor">
                        <div class="checkColor" @click.stop @click="selectColorFun()">
                            <span>{{selectColorCon}}</span>
                            <Icon type="ios-arrow-down" class="iconPosition" /> 
                        </div>
                         <div @click.stop class="selectPosition" v-if="selectColorShow">
                             <ul>
                                 <li v-for="(items,index) in selectColorArr" 
                                 :title="items.title"
                                 :style="{'background':items.background}">
                                     <!-- <span :style="{'background':"></span> -->
                                     <span v-for="(item,ind) in items.itemArr"
                                     :style="{'background':item.background}"
                                     :title="items.title"
                                     @click="selectItemColor(items.background,item.background,items.title,index)"
                                     ></span>
                                 </li>
                             </ul>
                         </div>
                    </div>
                </div>

                <div style="display: flex;margin-top: 20px;" v-if="lineStyle">
                    <span style="width: 62px;display: inline-block;font-size: 12px;line-height: 26px;">平滑曲线:</span>
                    <Col span="19">
                        <Col span="6">
                            <Checkbox v-model="smooth1" @click.prevent.native="checkboxSmoothFun('smooth1')">否</Checkbox>
                        </Col>
                        <Col span="6" offset="3">
                            <Checkbox v-model="smooth2" @click.prevent.native="checkboxSmoothFun('smooth2')">是</Checkbox>
                        </Col>
                    </Col>
                </div>
                <div style="font-size: 12px;display: flex;margin-top: 20px;" v-if="lineBarStyle"> 
                    <span style="display: inline-block;width: 62px;line-height: 26px;">Y轴开始:</span>
                    <Col span="19">
                        <Col span="8">
                            <Checkbox v-model="scale1" @click.prevent.native="checkboxSmoothFun('scale1')">从0开始</Checkbox>
                        </Col>
                        <Col span="14" offset='1'>
                            <Checkbox v-model="scale2" @click.prevent.native="checkboxSmoothFun('scale2')">从序列的最小值开始</Checkbox>
                        </Col>
                    </Col>
                </div>

                <div style="margin-top: 34px;">
                    <p class="perAttr">个性化属性</p>
                    <!-- <div style="font-size: 12px;display: flex;margin-bottom: 15px;"> 
                        <span style="width: 94px;display: inline-block;">“&nbsp;&nbsp;北京&nbsp;”&nbsp;:</span>
                        <ColorPicker v-model="color1" style="height: 26px;"/>
                        <Input v-model="expressionSize" size="small" style="margin-left: 8px;"/>
                    </div>
                    <div style="font-size: 12px;display: flex;margin-bottom: 15px;"> 
                        <span style="width: 94px;display: inline-block;">“&nbsp;&nbsp;北京&nbsp;”&nbsp;:</span>
                        <ColorPicker v-model="color1" style="height: 26px;"/>
                        <Input v-model="expressionSize" size="small" style="margin-left: 8px;"/>
                    </div>
                    <div style="font-size: 12px;display: flex;margin-bottom: 15px;"> 
                        <span style="width: 94px;display: inline-block;">“&nbsp;&nbsp;北京&nbsp;”&nbsp;:</span>
                        <ColorPicker v-model="color1" style="height: 26px;"/>
                        <Input v-model="expressionSize" size="small" style="margin-left: 8px;"/>
                    </div> -->

                    <div style="font-size: 12px;display: flex;margin-top: 20px;" v-if="barStyle"> 
                        <span style="display: inline-block;width: 62px;line-height: 26px;">Y/X轴取值:</span>
                        <Col span="19">
                            <Col span="10">
                                min：<Input v-model="minNumber" 
                                
                                @blur.native.capture= 'selectMinNUm(minNumber)'
                                size="small" style="width: 50%;"/>
                            </Col>
                            <Col span="10" offset='1'>
                                max：<Input v-model="maxNumber"
                                @blur.native.capture = 'selectMinNUm(maxNumber)' 
                                size="small" style="width: 50%;"/>
                            </Col>
                        </Col>
                    </div>

                    <div style="font-size: 12px;display: flex;margin-top: 20px;" v-if="barStyle"> 
                        <span style="display: inline-block;width: 62px;line-height: 26px;">柱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;宽&nbsp;&nbsp;:</span>
                        <Input v-model="barWidth"
                        @blur.native.capture = 'selectBarWidth()'  
                        size="small" style="width: 44%;"/>
                    </div>


                    <div style="margin-top: 26px;display: flex;" v-if="barStyle">
                        <span style="width: 62px;display: inline-block;font-size: 12px;line-height: 26px;">背景形状&nbsp;:</span>
                        <Col span="19">
                                <RadioGroup v-model ='barShadow'>
                                        <Radio label="shadow" >阴影</Radio>
                                        <Radio label="line" style="margin-left: 39px;">&nbsp;&nbsp;线条</Radio>
                                </RadioGroup> 
                        </Col>
                    </div>

                 
                    
                    <div style="font-size: 12px;display: flex;margin-top: 20px;" v-if="pieStyleShow"> 
                        <span style="display: inline-block;width: 62px;line-height: 26px;">半径大小&nbsp;:</span>
                        <Input v-model="pieSize"
                        placeholder="如输入多个,请以逗号分隔"
                        @blur.native.capture = "selectPie('pieSize')" 
                        size="small" style="width: 60%;"/>
                    </div>
                    <div style="font-size: 12px;display: flex;margin-top: 20px;" v-if="pieStyleShow"> 
                        <span style="display: inline-block;width: 62px;line-height: 26px;">圆心位置&nbsp;:</span>
                        <Input v-model="pieRaduis"
                        placeholder="如输入多个,请以逗号分隔"
                        @blur.native.capture = "selectPie('pieRaduis')"  
                        size="small" style="width: 60%;"/>
                    </div>
                    
                    <div style="margin-top: 18px;display: flex;height: 30px;" class="displayIconCent" v-if="lineScatterStyle">
                        <p class="perAttr" style="font-size: 12px;">图形标记:</p>
                        <div class="selectColor">
                            <div class="checkColor"  @click.stop @click="selectIconFun()">
                                <span>{{selecIconCon}}</span>
                                <Icon type="ios-arrow-down" class="iconPosition" /> 
                            </div>
                             <div @click.stop class="selectPosition" v-if="selectIconShow">
                                 <ul>
                                     <li v-for="(items,index) in selectIconArr" 
                                     :title="items.value"
                                     style='line-height: 28px;'
                                     @click="selectOnlyIconFun(index)"
                                     >
                                     {{items.name}}
                                     </li>
                                 </ul>
                             </div>
                        </div>
                    </div>
                    <div style="display: flex;margin-top: 20px;" v-if="lineScatterStyle">
                        <div style="display: flex;">
                            <span style="width: 61px;font-size: 12px;line-height: 26px;">图案大小&nbsp;:&nbsp;</span>
                            <Input v-model="symbolSize" size="small" 
                            style="width: 67.8%;"/>
                        </div>
                    </div>

                    <div style="display: flex;margin-top: 20px;" v-if="lineScatterStyleShow"> 
                        <span style="display: inline-block;width: 62px;line-height: 26px;font-size: 12px;">高&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;亮&nbsp;&nbsp;:</span>
                        <Col span="19">
                            <Col span="20">
                                <Checkbox v-model="scatterHight1" @click.prevent.native="checkboxScatterFun('scatterHight1')">高亮边缘四个点</Checkbox>
                            </Col>
                            <Col span="24" style="margin-top: 10px;">
                                <Checkbox v-model="scatterHight2" @click.prevent.native="checkboxScatterFun('scatterHight2')">高亮前若干个点</Checkbox>
                                <Input v-model="scatterNum" size="small" 
                                @blur.native.capture = "selectScatter('scatterNum')" 
                                style="width: 30%;"/>
                            </Col>
                        </Col>
                    </div>

                </div>
            </Col>
        </Row>
    </div>
</template>
<script>
    import { mapState, mapActions } from 'vuex'
    import zmitiUtil from '../../../lib/util'
    import * as seleData from '../../../lib/dataInfor'
    import {echartType} from '../../../lib/table_definition'
    import echarts from 'echarts';
    import ecStat from 'echarts-stat';
    import 'echarts/extension/bmap/bmap';
    import 'echarts/map/js/china';
    var CheckboxEchartData={};
    const toolbox ={
        //show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    };
    export default {
        computed: mapState({
            Authorization: state => state.Authorization
        }),

        data() {
            return {
                echartType:"Basic area chart",
                social:[],
                color1: '#19be6b',
                color2: '#19be6b',
                expressionSize:"气泡的表达大小",
                iconShowType:"",
                single1:false,
                single2:false,
                single3:false,
                direction:{
                    directionLeft:false,
                    directionCent:true,
                    directionRight:false
                },
                legend:false,
                selectColor:false,
                selectColorShow:false,
                selectColorCon:"请选择",
                selectColorArr:[
                    {
                        background:'rgb(254, 248, 239)',
                        title:'vintage',
                        itemArr:[
                            {
                                background:'rgb(216, 124, 124)',
                            },
                            {
                                background:'rgb(145, 158, 139)',
                            },
                            {
                                background:'rgb(215, 171, 130)',
                            },
                            {
                                background:'rgb(110, 112, 116)',
                            },
                            {
                                background:'rgb(97, 160, 168)',
                            }
                        ]
                    },
                    {
                        background:'rgb(51, 51, 51)',
                        title:'dark',
                        itemArr:[
                            {
                                background:'rgb(221, 107, 102)',
                            },
                            {
                                background:'rgb(117, 154, 160)',
                            },
                            {
                                background:'rgb(230, 157, 135)',
                            },
                            {
                                background:'rgb(141, 193, 169)',
                            },
                            {
                                background:'rgb(234, 126, 83)',
                            }
                        ]
                    },
                    {
                        background:'transparent',
                        title:'westeros',
                        itemArr:[
                            {
                                background:'rgb(81, 107, 145)',
                            },
                            {
                                background:'rgb(89, 196, 230)',
                            },
                            {
                                background:'rgb(237, 175, 218)',
                            },
                            {
                                background:'rgb(147, 183, 227)',
                            },
                            {
                                background:'rgb(165, 231, 240)',
                            }
                        ]
                    },
                    {
                        background:'rgba(242, 234, 191, 0.15)',
                        title:'essos',
                        itemArr:[
                            {
                                background:'rgb(137, 52, 72)',
                            },
                            {
                                background:'rgb(217, 88, 80)',
                            },
                            {
                                background:'rgb(235, 129, 70)',
                            },
                            {
                                background:'rgb(255, 178, 72)',
                            },
                            {
                                background:'rgb(242, 214, 67)',
                            }
                        ]
                    },
                    {
                        background:'transparent',
                        title:'wonderland',
                        itemArr:[
                            {
                                background:'rgb(78, 163, 151)',
                            },
                            {
                                background:'rgb(34, 195, 170)',
                            },
                            {
                                background:'rgb(123, 217, 165)',
                            },
                            {
                                background:'rgb(208, 100, 138)',
                            },
                            {
                                background:'rgb(245, 141, 178)',
                            }
                        ]
                    },
                    {
                        background:'rgba(252, 252, 252, 0)',
                        title:'walden',
                        itemArr:[
                            {
                                background:'rgb(63, 177, 227)',
                            },
                            {
                                background:'rgb(107, 230, 193)',
                            },
                            {
                                background:'rgb(98, 108, 145)',
                            },
                            {
                                background:'rgb(160, 167, 230)',
                            },
                            {
                                background:'rgb(196, 235, 173)',
                            }
                        ]
                    },
                    {
                        background:'rgb(41, 52, 65)',
                        title:'chalk',
                        itemArr:[
                            {
                                background:'rgb(252, 151, 175)',
                            },
                            {
                                background:'rgb(135, 247, 207)',
                            },
                            {
                                background:'rgb(247, 244, 148)',
                            },
                            {
                                background:'rgb(114, 204, 255)',
                            },
                            {
                                background:'rgb(247, 197, 160)',
                            }
                        ]
                    },
                    {
                        background:'transparent',
                        title:'infographic',
                        itemArr:[
                            {
                                background:'rgb(193, 35, 43)',
                            },
                            {
                                background:'rgb(39, 114, 123)',
                            },
                            {
                                background:'rgb(252, 206, 16)',
                            },
                            {
                                background:'rgb(232, 124, 37)',
                            },
                            {
                                background:'rgb(181, 195, 52)',
                            }
                        ]
                    },
                    {
                        background:'transparent',
                        title:'macarons',
                        itemArr:[
                            {
                                background:'rgb(46, 199, 201)',
                            },
                            {
                                background:'rgb(182, 162, 222)',
                            },
                            {
                                background:'rgb(90, 177, 239)',
                            },
                            {
                                background:'rgb(255, 185, 128)',
                            },
                            {
                                background:'rgb(216, 122, 128)',
                            }
                        ]
                    },
                    {
                        background:'transparent',
                        title:'shine',
                        itemArr:[
                            {
                                background:'rgb(193, 46, 52)',
                            },
                            {
                                background:'rgb(230, 182, 0)',
                            },
                            {
                                background:'rgb(0, 152, 217)',
                            },
                            {
                                background:'rgb(43, 130, 29)',
                            },
                            {
                                background:'rgb(0, 94, 170)',
                            }
                        ]
                    },
                    {
                        background:'transparent',
                        title:'roma',
                        itemArr:[
                            {
                                background:'rgb(224, 31, 84)',
                            },
                            {
                                background:'rgb(0, 24, 82)',
                            },
                            {
                                background:'rgb(245, 232, 200)',
                            },
                            {
                                background:'rgb(184, 210, 199)',
                            },
                            {
                                background:'rgb(198, 179, 142)',
                            }
                            
                        ]
                    },
                    {
                        background:'rgb(91, 92, 110)',
                        title:'purple-passion',
                        itemArr:[
                            {
                                background:'rgb(138, 124, 168)',
                            },
                            {
                                background:'rgb(224, 152, 199)',
                            },
                            {
                                background:'rgb(143, 211, 232)',
                            },
                            {
                                background:'rgb(113, 102, 158)',
                            },
                            {
                                background:'rgb(204, 112, 175)',
                            }
                        ]
                    },
                    {
                        background:'rgb(51, 51, 51)',
                        title:'halloween',
                        itemArr:[
                            {
                                background:'rgb(255, 113, 94)',
                            },
                            {
                                background:'rgb(255, 175, 81)',
                            },
                            {
                                background:'rgb(255, 238, 81)',
                            },
                            {
                                background:'rgb(121, 127, 186)',
                            },
                            {
                                background:'rgb(113, 92, 135)',
                            }
                        ]
                    }
                ],
                disabledSingle:"",
                seriesSort:false,
                selecIconCon:"请选择",
                selectIconShow:false,
                selectIconArr:[
                    {value:"emptyCircle",name:"空心圆"},
                    {value:"circle",name:"实心圆"},
                    {value:"rect",name:"矩形"},
                    {value:"roundRect",name:"圆角矩形"},
                    {value:"triangle",name:"三角形"},
                    {value:"diamond",name:"菱形"},
                    {value:"pin",name:"大头针"},
                    {value:"arrow",name:"箭头"},
                    {value:"none",name:"无"},
                ],
                symbolSize:"",
                smooth1:false,
                smooth2:false,
                lineStyle:false,
//
                scale1:"",
                scale2:"",
                minNumber:"",
                maxNumber:"",
                barWidth:"",
                barStyle:false,
                lineBarStyle:false,
                barShadow:"",
                pieSize:"",
                pieRaduis:"",
                pieStyleShow:false,

                lineScatterStyle:false,
                scatterNum:"",
                scatterHight2:"",
                scatterHight1:"",
                lineScatterStyleShow:false,

                ajaxData:[]
            }
        },
        mounted() {
            window.addEventListener('click', this.handleSelectCon);
            this.getIconShowType()
            this.getChartDataSet()
            if(JSON.parse(this.$route.query.values).length>1){
                   this.legend = true;
            }
            this.symbolSize = "";
            this.barShadow = '';
            this.disabledSingle = '';

        },
        methods: {
            getIconShowType(){
                this.echartType = this.$route.query.chartName;
                echartType.map((item,index) =>{
                    if(item.category == this.$route.query.chartName.split('_')[1]){
                        this.iconShowType = item.name
                    }
               }) 
            },
            jumpPage(page){
                if(this.$route.query.pageCurr == '/echart'){
                    this.$router.push({
                        path: "/echart",
                        query:{
                            dims:this.$route.query.dims,
                            values:this.$route.query.values,
                        }
                    });
                }else{
                    this.$router.push({
                        path: page,
                        query:{
                            dims:this.$route.query.dims,
                            values:this.$route.query.values,
                            chartName:this.$route.query.chartName,
                            config:this.$route.query.config,
                            seriesOne:this.$route.query.seriesOne,
                            seriesTwo:this.$route.query.seriesTwo
                        }
                    });
                }
                
            },
            getChartDataSet(){
                var path='table/getChartDataset';
                    zmitiUtil.Ajax(path).then(res => {
                        var data = res.data;
                        this.ajaxData = data;
                        let echartData = {}
                        if(this.$route.query.chartName == 'basic_line'){
                            this.lineStyle = true;
                            this.lineBarStyle = true;
                            this.lineScatterStyle = true;
                            echartData = seleData.default.dayChartData;
                            echartData.xAxis.data = data[0];
                            echartData.series[0].data = data[1];
                            echartData.title.text = this.echartType;
                            echartData.title.left = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'area_line'){
                            this.lineStyle = true;
                            this.lineBarStyle = true;
                            this.lineScatterStyle = true;
                            echartData = seleData.default.dayChartData2;
                            echartData.xAxis.data = data[0];
                            echartData.series[0].data = data[1];
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'multi_line'){
                            this.lineStyle = true;
                            this.lineBarStyle = true;
                            this.lineScatterStyle = true;
                            echartData = seleData.default.dayChartData3;
                            this.lineChart(data,echartData)
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'stack_line'){
                            this.lineStyle = true;
                            this.lineBarStyle = true;
                            this.lineScatterStyle = true;
                            echartData = seleData.default.dayChartData4;
                            this.lineChart(data,echartData)
                            echartData.series.forEach((item,index) => {
                                item["areaStyle"] = {}
                            })
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'smooth_line'){
                            this.lineStyle = true;
                            this.lineBarStyle = true;
                            this.lineScatterStyle = true;
                            echartData = seleData.default.dayChartData5;
                            echartData.xAxis.data = data[0];
                            echartData.series[0].data = data[1];
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'basic_bar'){
                            this.lineBarStyle = true;
                            this.barStyle = true;
                            echartData = seleData.default.barChartData;
                            echartData.xAxis[0].data = data[0];
                            echartData.series[0].data = data[1];
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'multi_bar'){
                            this.lineBarStyle = true;
                            this.barStyle = true;
                            echartData = seleData.default.barChartData2;
                            echartData.dataset.source = data;
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'bidirection_bar'){
                            this.lineBarStyle = true;
                            this.barStyle = true;
                            echartData = seleData.default.barChartData3;
                            this.lineChart(data,echartData)
                            this.barChart(echartData)
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'line_bar'){
                            this.lineBarStyle = true;
                            this.barStyle = true;
                            echartData = seleData.default.barChartData4;
                            this.lineChart(data,echartData)
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'stack_bar'){
                            this.lineBarStyle = true;
                            this.barStyle = true;
                            echartData = seleData.default.barChartData5;
                            this.lineChart(data,echartData)
                            this.barChart(echartData)
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'basic_pie'){
                            this.legend = true;
                            this.pieStyleShow = true;
                            echartData = seleData.default.pieChartData;
                            echartData.legend.data = data[0];
                            echartData.series[0].data = data[1];
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'doughnut_pie'){
                            this.legend = true;
                            this.pieStyleShow = true;
                            echartData = seleData.default.pieChartData2;
                            echartData.legend.data = data[0];
                            echartData.series[0].data = data[1];
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'scrolled_pie'){
                            this.legend = true;
                            this.pieStyleShow = true;
                            echartData = seleData.default.pieChartData3;
                            echartData.legend.data = data[0];
                            echartData.series[0].data = data[1];
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                            
                        }else if(this.$route.query.chartName == 'basic_scatter'){
                            this.lineScatterStyle = true;
                            this.lineScatterStyleShow = true;
                            echartData = seleData.default.scatterChartData;
                            echartData.series[0].data = data;
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'bubble_scatter'){
                            this.lineScatterStyle = true;
                            this.lineScatterStyleShow = true;
                            echartData = seleData.default.scatterChartData2;
                            //echartData.series[0].data = data;
                            echartData.series[1].data = data;
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                            //console.log(Object.keys(JSON.parse(this.$route.query.selectConfig)))
                            //echartData.legend.data = ["456",'89']
                        }else if(this.$route.query.chartName == 'effect_scatter'){
                            this.lineScatterStyle = true;
                            this.lineScatterStyleShow = true;
                            echartData = seleData.default.scatterChartData3;
                            echartData.series[1].data = data;
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'exp_reg_scatter'){
                            this.lineScatterStyle = true;
                            this.lineScatterStyleShow = true;
                            var myRegression = ecStat.regression('exponential', data);
                            myRegression.points.sort(function(a, b) {
                                return a[0] - b[0];
                            });
                            echartData = seleData.default.scatterChartData4;
                            echartData.series[0].data = data
                            echartData.series[1].data = myRegression.points
                            echartData.series[1].markPoint.label.formatter = myRegression.expression
                            echartData.series[1].markPoint.data[0].coord = myRegression.points[myRegression.points.length - 1]
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'logic_reg_scatter'){
                            this.lineScatterStyle = true;
                            this.lineScatterStyleShow = true;
                            var myRegression5 = ecStat.regression('logarithmic', data);

                            myRegression5.points.sort(function(a, b) {
                                return a[0] - b[0];
                            });
                            echartData = seleData.default.scatterChartData5;
                            echartData.series[2].data = data;
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'line_reg_scatter'){
                            this.lineScatterStyle = true;
                            this.lineScatterStyleShow = true;
                            var myRegression6 = ecStat.regression('linear', data);

                            myRegression6.points.sort(function(a, b) {
                                return a[0] - b[0];
                            });
                            echartData = seleData.default.scatterChartData6;
                            echartData.series[0].data = data;
                            echartData.series[1].data = myRegression6.points
                            echartData.series[1].markPoint.label.formatter = myRegression6.expression
                            echartData.series[1].markPoint.data[0].coord = myRegression6.points[myRegression6.points.length - 1]
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'scatter_map'){
                            echartData = seleData.default.mapChartData; 
                            let scatterMapArr = []
                            data.forEach((item,index) => {
                                scatterMapArr.push(item[0])
                            })
                            var dataMap = [
                                {name: '海门', value: 9},
                                {name: '鄂尔多斯', value: 12},
                                {name: '招远', value: 12},
                                {name: '舟山', value: 12},
                                {name: '齐齐哈尔', value: 14},
                                {name: '盐城', value: 15},
                                {name: '赤峰', value: 16},
                                {name: '青岛', value: 18},
                                {name: '乳山', value: 18},
                                {name: '金昌', value: 19},
                                {name: '泉州', value: 21},
                                {name: '莱西', value: 21},
                                {name: '日照', value: 21},
                                {name: '胶南', value: 22},
                                {name: '南通', value: 23},
                                {name: '拉萨', value: 24},
                                {name: '云浮', value: 24},
                                {name: '梅州', value: 25},
                                {name: '文登', value: 25},
                                {name: '上海', value: 25},
                                {name: '攀枝花', value: 25},
                                {name: '威海', value: 25},
                                {name: '承德', value: 25},
                                {name: '厦门', value: 26},
                                {name: '汕尾', value: 26},
                                {name: '潮州', value: 26},
                                {name: '丹东', value: 27},
                                {name: '太仓', value: 27},
                                {name: '曲靖', value: 27},
                                {name: '烟台', value: 28},
                                {name: '福州', value: 29},
                                {name: '瓦房店', value: 30},
                                {name: '即墨', value: 30},
                                {name: '抚顺', value: 31},
                                {name: '玉溪', value: 31},
                                {name: '张家口', value: 31},
                                {name: '阳泉', value: 31},
                                {name: '莱州', value: 32},
                                {name: '湖州', value: 32},
                                {name: '汕头', value: 32},
                                {name: '昆山', value: 33},
                                {name: '宁波', value: 33},
                                {name: '湛江', value: 33},
                                {name: '揭阳', value: 34},
                                {name: '荣成', value: 34},
                                {name: '连云港', value: 35},
                                {name: '葫芦岛', value: 35},
                                {name: '常熟', value: 36},
                                {name: '东莞', value: 36},
                                {name: '河源', value: 36},
                                {name: '淮安', value: 36},
                                {name: '泰州', value: 36},
                                {name: '南宁', value: 37},
                                {name: '营口', value: 37},
                                {name: '惠州', value: 37},
                                {name: '江阴', value: 37},
                                {name: '蓬莱', value: 37},
                                {name: '韶关', value: 38},
                                {name: '嘉峪关', value: 38},
                                {name: '广州', value: 38},
                                {name: '延安', value: 38},
                                {name: '太原', value: 39},
                                {name: '清远', value: 39},
                                {name: '中山', value: 39},
                                {name: '昆明', value: 39},
                                {name: '寿光', value: 40},
                                {name: '盘锦', value: 40},
                                {name: '长治', value: 41},
                                {name: '深圳', value: 41},
                                {name: '珠海', value: 42},
                                {name: '宿迁', value: 43},
                                {name: '咸阳', value: 43},
                                {name: '铜川', value: 44},
                                {name: '平度', value: 44},
                                {name: '佛山', value: 44},
                                {name: '海口', value: 44},
                                {name: '江门', value: 45},
                                {name: '章丘', value: 45},
                                {name: '肇庆', value: 46},
                                {name: '大连', value: 47},
                                {name: '临汾', value: 47},
                                {name: '吴江', value: 47},
                                {name: '石嘴山', value: 49},
                                {name: '沈阳', value: 50},
                                {name: '苏州', value: 50},
                                {name: '茂名', value: 50},
                                {name: '嘉兴', value: 51},
                                {name: '长春', value: 51},
                                {name: '胶州', value: 52},
                                {name: '银川', value: 52},
                                {name: '张家港', value: 52},
                                {name: '三门峡', value: 53},
                                {name: '锦州', value: 54},
                                {name: '南昌', value: 54},
                                {name: '柳州', value: 54},
                                {name: '三亚', value: 54},
                                {name: '自贡', value: 56},
                                {name: '吉林', value: 56},
                                {name: '阳江', value: 57},
                                {name: '泸州', value: 57},
                                {name: '西宁', value: 57},
                                {name: '宜宾', value: 58},
                                {name: '呼和浩特', value: 58},
                                {name: '成都', value: 58},
                                {name: '大同', value: 58},
                                {name: '镇江', value: 59},
                                {name: '桂林', value: 59},
                                {name: '张家界', value: 59},
                                {name: '宜兴', value: 59},
                                {name: '北海', value: 60},
                                {name: '西安', value: 61},
                                {name: '金坛', value: 62},
                                {name: '东营', value: 62},
                                {name: '牡丹江', value: 63},
                                {name: '遵义', value: 63},
                                {name: '绍兴', value: 63},
                                {name: '扬州', value: 64},
                                {name: '常州', value: 64},
                                {name: '潍坊', value: 65},
                                {name: '重庆', value: 66},
                                {name: '台州', value: 67},
                                {name: '南京', value: 67},
                                {name: '滨州', value: 70},
                                {name: '贵阳', value: 71},
                                {name: '无锡', value: 71},
                                {name: '本溪', value: 71},
                                {name: '克拉玛依', value: 72},
                                {name: '渭南', value: 72},
                                {name: '马鞍山', value: 72},
                                {name: '宝鸡', value: 72},
                                {name: '焦作', value: 75},
                                {name: '句容', value: 75},
                                {name: '北京', value: 79},
                                {name: '北京', value: 120},
                                {name: '徐州', value: 79},
                                {name: '衡水', value: 80},
                                {name: '包头', value: 80},
                                {name: '绵阳', value: 80},
                                {name: '乌鲁木齐', value: 84},
                                {name: '枣庄', value: 84},
                                {name: '杭州', value: 84},
                                {name: '淄博', value: 85},
                                {name: '鞍山', value: 86},
                                {name: '溧阳', value: 86},
                                {name: '库尔勒', value: 86},
                                {name: '安阳', value: 90},
                                {name: '开封', value: 90},
                                {name: '济南', value: 92},
                                {name: '德阳', value: 93},
                                {name: '温州', value: 95},
                                {name: '九江', value: 96},
                                {name: '邯郸', value: 98},
                                {name: '临安', value: 99},
                                {name: '兰州', value: 99},
                                {name: '沧州', value: 100},
                                {name: '临沂', value: 103},
                                {name: '南充', value: 104},
                                {name: '天津', value: 105},
                                {name: '富阳', value: 106},
                                {name: '泰安', value: 112},
                                {name: '诸暨', value: 112},
                                {name: '郑州', value: 113},
                                {name: '哈尔滨', value: 114},
                                {name: '聊城', value: 116},
                                {name: '芜湖', value: 117},
                                {name: '唐山', value: 119},
                                {name: '平顶山', value: 119},
                                {name: '邢台', value: 119},
                                {name: '德州', value: 120},
                                {name: '济宁', value: 120},
                                {name: '荆州', value: 127},
                                {name: '宜昌', value: 130},
                                {name: '义乌', value: 132},
                                {name: '丽水', value: 133},
                                {name: '洛阳', value: 134},
                                {name: '秦皇岛', value: 136},
                                {name: '株洲', value: 143},
                                {name: '石家庄', value: 147},
                                {name: '莱芜', value: 148},
                                {name: '常德', value: 152},
                                {name: '保定', value: 153},
                                {name: '湘潭', value: 154},
                                {name: '金华', value: 157},
                                {name: '岳阳', value: 169},
                                {name: '长沙', value: 175},
                                {name: '衢州', value: 177},
                                {name: '廊坊', value: 193},
                                {name: '菏泽', value: 194},
                                {name: '合肥', value: 229},
                                {name: '武汉', value: 273},
                                {name: '大庆', value: 279}
                            ];
                            var convertData = function (data) {
                                var res = [];
                                for (var i = 0; i < dataMap.length; i++) {
                                    data.forEach((item,index) =>{
                                         var geoCoord = item[dataMap[i].name];
                                         if(geoCoord){
                                            res.push({
                                            name: dataMap[i].name,
                                            value: geoCoord.concat(dataMap[i].value)
                                            });
                                         }
                                    })
                                    
                                }
                                return res;
                            };
                           
                            echartData.series[0].data = convertData(scatterMapArr);
                            echartData.series[1].data = convertData(scatterMapArr);
                            echartData.series[0].symbolSize = function (val) {
                                return 20;
                            }
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'thermo_map'){
                            echartData = seleData.default.mapChartData3;
                            
                            echartData.title.text = this.echartType;
                            echartData.title['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                            var dataThermoMap =[{
                                name: "南海诸岛",
                                value: 0
                                },
                                {
                                name: '北京',
                                value: 54
                                },
                                {
                                name: '天津',
                                value: 13
                                },
                                {
                                name: '上海',
                                value: 40
                                },
                                {
                                name: '重庆',
                                value: 75
                                },
                                {
                                name: '河北',
                                value: 13
                                },
                                {
                                name: '河南',
                                value: 83
                                },
                                {
                                name: '云南',
                                value: 11
                                },
                                {
                                name: '辽宁',
                                value: 19
                                },
                                {
                                name: '黑龙江',
                                value: 15
                                },
                                {
                                name: '湖南',
                                value: 69
                                },
                                {
                                name: '安徽',
                                value: 60
                                },
                                {
                                name: '山东',
                                value: 39
                                },
                                {
                                name: '新疆',
                                value: 4
                                },
                                {
                                name: '江苏',
                                value: 31
                                },
                                {
                                name: '浙江',
                                value: 104
                                },
                                {
                                name: '江西',
                                value: 36
                                },
                                {
                                name: '湖北',
                                value: 1052
                                },
                                {
                                name: '广西',
                                value: 33
                                },
                                {
                                name: '甘肃',
                                value: 7
                                },
                                {
                                name: '山西',
                                value: 9
                                },
                                {
                                name: '内蒙古',
                                value: 7
                                },
                                {
                                name: '陕西',
                                value: 22
                                },
                                {
                                name: '吉林',
                                value: 4
                                },
                                {
                                name: '福建',
                                value: 18
                                },
                                {
                                name: '贵州',
                                value: 5
                                },
                                {
                                name: '广东',
                                value: 98
                                },
                                {
                                name: '青海',
                                value: 1
                                },
                                {
                                name: '西藏',
                                value: 0
                                },
                                {
                                name: '四川',
                                value: 44
                                },
                                {
                                name: '宁夏',
                                value: 4
                                },
                                {
                                name: '海南',
                                value: 22
                                },
                                {
                                name: '台湾',
                                value: 3
                                },
                                {
                                name: '香港',
                                value: 5
                                },
                                {
                                name: '澳门',
                                value: 5
                                }   
                            ];
                            var res = [];
                            for (var i = 0; i < dataThermoMap.length; i++) {
                                data[0].forEach((item,index) =>{
                                    //var geoCoord = item[dataThermoMap[i].name];
                                    if(dataThermoMap[i].name == item){
                                        res.push({
                                        name: item,
                                        value: dataThermoMap[i].value
                                        });
                                    }
                                })
                                
                            }
                            echartData.series[0].data = res
                            
                        }else if(this.$route.query.chartName == 'basic_funnel'){
                            this.legend = true;
                            this.seriesSort = true;
                            echartData = seleData.default.funnelPlotChartData;
                            echartData.legend.data = data[0];
                            echartData.series[0].data = data[1];
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }else if(this.$route.query.chartName == 'diff_funnel'){
                            this.legend = true;
                            this.seriesSort = true;
                            echartData = seleData.default.funnelPlotChartData2;
                            echartData['title']['text'] = this.echartType;
                            echartData['title']['left'] = 'center';
                            echartData['toolbox'] = toolbox;
                        }
                        CheckboxEchartData = echartData;

                        console.log(data)
                        console.log(CheckboxEchartData)

                        this.createChart('echart', echartData)
                    }).catch((error) => {
                        console.log(error,'error');
                    }); 
            
            },
            createChart(chartId, chartData) {
                let myCharts = echarts.init(document.getElementById(chartId));
                window.addEventListener('resize', function () {myCharts.resize()})
                //防止越界，重绘canvas
                window.onresize = myCharts.resize;
                myCharts.setOption(chartData);//设置option
                window.addEventListener('resize', function () {myCharts.resize()})
            },
            lineChart(data,echartData){
                var xAxis = [],legend=[],series = []
                    data.forEach((item,index)=>{                          
                        if(index == 0){
                            for(var i in item){
                                if(i>0){
                                xAxis.push(item[i])
                                }
                            }
                        }else{
                            legend.push(item[0]);
                            
                            var seriesItem = [];
                            item.forEach((val,ind) => {
                                if(ind>0){
                                    seriesItem.push(val)
                                }
                            })
                            series.push(
                            {
                                name: item[0],
                                type: 'line',
                                stack: '总量',
                                data: seriesItem
                            })
                        }
                        
                    })
                    echartData.legend.data = legend;
                    echartData.series= series;
                    if(this.$route.query.chartName == 'line_bar'){
                        echartData.xAxis[0].data = xAxis;
                        echartData.series[0].type = 'bar';
                        echartData.series[1].type = 'bar';
                        if(echartData.series[2]){
                            echartData.series[2].type = 'line';
                            echartData.series[2]["yAxisIndex"] = 1;
                        }   
                        var config =JSON.parse(this.$route.query.selectConfig);
                        if(config["柱状序列1"]){
                            echartData.yAxis[0].name = config["柱状序列1"];
                            //echartData.yAxis[0].max = 400
                            echartData.yAxis[0]['axisLabel'] = {
				                 formatter: '{value}'
                            }
                            
                        }
                        if(config["柱状序列2"]){
                            echartData.yAxis[1].name = config["柱状序列2"];
                            //echartData.yAxis[0].max = 40
                            echartData.yAxis[1]['axisLabel'] = {
				                 formatter: '{value}'
			                }
                        }
                        if(config["折线序列"]){
                            echartData.series.forEach((item,index) => {
                                if(item.name == config["折线序列"]){
                                    item.type = 'line'
                                    item.yAxisIndex = '1'
                                }
                            })
                        }
                    }else if(this.$route.query.chartName == 'bidirection_bar'){
                        //var config =JSON.parse(this.$route.query.selectConfig);
                        if(this.$route.query.selectConfig){
                            echartData.xAxis[0].type = 'category',
                            echartData.xAxis[0].data = xAxis
                            echartData.yAxis[0].type = 'value'
                        }
                    }else if(this.$route.query.chartName == 'stack_bar'){
                        if(this.$route.query.selectConfig){
                            echartData.xAxis.type = 'category'
                            echartData.yAxis.type = 'value'
                            echartData.xAxis.data = xAxis;
                        }
                    }else if(this.$route.query.chartName == 'stack_line'){
                        if(this.$route.query.selectConfig){
                            echartData.xAxis[0].type = 'category'
                            echartData.yAxis[0].type = 'value'
                            echartData.xAxis[0].data = xAxis;
                        }
                    }else{
                        echartData.xAxis.data = xAxis;
                    }
                    
                // return {
                //     xAxis:xAxis,
                //     legend:legend,
                //     series:series
                // }
            },
            barChart(echartData){
                echartData.series.map((item,index) =>{
                    item.type = 'bar';
                    if(this.$route.query.chartName == 'stack_bar'){
                        item['label'] = {
                            show: true,
                            position: 'insideRight'
                        }
                    }else{
                        if(index == 0){
                        item['label'] = {
                            show: true,
                            position: 'inside'
                        }
                        }else if(index == echartData.series.length - 1){
                            item['label'] = {
                                show: true,
                                position: 'left'
                            }
                        }else{
                            item['label'] = {
                            show: true,
                            }
                        }
                    }
                })
            },
            directionFun(mgs){
                Object.keys(this.direction).forEach((item,index) => {
                    this.direction[item]=false
                })
                this.direction[mgs] = true;
                // if(this.$route.query.chartName == 'basic_line'){
                //     CheckboxEchartData.title.text = this.echartType
                // }else if(this.$route.query.chartName == 'area_line'){
                    
                // }else if(this.$route.query.chartName == 'multi_line'){
                    
                // }else if(this.$route.query.chartName == 'stack_line'){
                    
                // }else if(this.$route.query.chartName == 'smooth_line'){
                    
                // }else if(this.$route.query.chartName == 'basic_bar'){
                    
                // }else if(this.$route.query.chartName == 'multi_bar'){
                   
                // }else if(this.$route.query.chartName == 'bidirection_bar'){
                    
                // }else if(this.$route.query.chartName == 'line_bar'){
                   
                // }else if(this.$route.query.chartName == 'stack_bar'){
                    
                // }else if(this.$route.query.chartName == 'basic_pie'){
               
                // }else if(this.$route.query.chartName == 'doughnut_pie'){
                    
                // }else if(this.$route.query.chartName == 'scrolled_pie'){
                   
                // }else if(this.$route.query.chartName == 'basic_scatter'){
                    
                // }else if(this.$route.query.chartName == 'bubble_scatter'){
             
                // }else if(this.$route.query.chartName == 'effect_scatter'){
                   
                // }else if(this.$route.query.chartName == 'exp_reg_scatter'){
                   
                // }else if(this.$route.query.chartName == 'logic_reg_scatter'){
                    
                // }else if(this.$route.query.chartName == 'line_reg_scatter'){
                    
                // }else if(this.$route.query.chartName == 'scatter_map'){
                    
                // }else if(this.$route.query.chartName == 'thermo_map'){
                  
                // }else if(this.$route.query.chartName == 'basic_funnel'){
                    
                // }else if(this.$route.query.chartName == 'diff_funnel'){
                 
                // }
                
                if(mgs == 'directionLeft'){
                    CheckboxEchartData['title']["left"] = 'left'
                }else if(mgs == 'directionCent'){
                    CheckboxEchartData['title']["left"] = 'center'
                }else if(mgs == 'directionRight'){
                    CheckboxEchartData['title']["left"] = 'right'
                }
                this.createChart('echart', CheckboxEchartData)
            },
            checkboxFun(mgs){
                switch(mgs) {
                    case 'single1':
                        this.single1 = !this.single1;
                        this.single2 = false;
                        this.single3 = false;
                        break;
                    case 'single2':
                        this.single2 = !this.single2;
                        this.single1 = false;
                        this.single3 = false;
                        break;
                    case 'single3':
                        this.single3 = !this.single3;
                        this.single1 = false;
                        this.single2 = false;
                        break;
                } 
                if(this.single1){
                    //CheckboxEchartData.legend['orient'] = 'horizontal'
                    //CheckboxEchartData.legend['left'] = 'center';
                    CheckboxEchartData.legend['show'] = ''
                }else if(this.single2){
                    CheckboxEchartData.legend['show'] = true;
                    CheckboxEchartData.legend['orient'] = 'horizontal'
                    CheckboxEchartData.legend['left'] = '0px';
                }else if(this.single3){
                    CheckboxEchartData.legend['show'] = true;
                    CheckboxEchartData.legend['orient'] = 'vertical';
                    CheckboxEchartData.legend['left'] = '0px';
                } 
                this.createChart('echart', CheckboxEchartData)
            },
            selectColorFun(){
                this.selectColorShow = !this.selectColorShow
            },
            selectItemColor(parentColor,childrenColor,title,index){
                this.selectColorCon = title;
                CheckboxEchartData['backgroundColor'] = parentColor;
                if(title == 'dark' || title == 'chalk' || title == 'halloween' || title == 'purple-passion'){
                    CheckboxEchartData.title.textStyle.color = '#fff';
                    CheckboxEchartData.textStyle['color'] = '#fff';
                    if(CheckboxEchartData.legend){
                        CheckboxEchartData.legend['textStyle']['color'] = '#fff'
                    }
                    if(CheckboxEchartData.xAxis){
                        if(CheckboxEchartData.xAxis.length){
                            CheckboxEchartData.xAxis[0].axisLine.lineStyle.color = '#fff';
                            CheckboxEchartData.yAxis.forEach((val,index) => {
                                val.axisLine.lineStyle.color = '#fff';
                            })
                        }else{
                            CheckboxEchartData.xAxis.axisLine.lineStyle.color = '#fff';
                            CheckboxEchartData.yAxis.axisLine.lineStyle.color = '#fff';
                        }
                    }
                    if(this.$route.query.chartName == 'thermo_map'){
                        CheckboxEchartData.visualMap.textStyle['color'] = '#fff';
                    }else if(this.$route.query.chartName == 'scatter_map'){
                        CheckboxEchartData['backgroundColor'] = ''
                        CheckboxEchartData.bmap.mapStyle = seleData.default.styleJson3;
                        
                    }
                }else{
                    CheckboxEchartData.title.textStyle.color = '#000';
                    CheckboxEchartData.textStyle['color'] = '#000';
                    if(CheckboxEchartData.legend){
                        CheckboxEchartData.legend['textStyle']['color'] = '#000'
                    }
                    if(CheckboxEchartData.xAxis){
                        if(CheckboxEchartData.xAxis.length){
                            CheckboxEchartData.xAxis[0].axisLine.lineStyle.color = '#000';
                            CheckboxEchartData.yAxis.forEach((val,index) => {
                                val.axisLine.lineStyle.color = '#000';
                            })
                        }else{
                            CheckboxEchartData.xAxis.axisLine.lineStyle.color = '#000';
                            CheckboxEchartData.yAxis.axisLine.lineStyle.color = '#000';
                        }
                    }
                    if(this.$route.query.chartName == 'thermo_map'){
                        CheckboxEchartData.visualMap.textStyle['color'] = '#000'
                    }else if(this.$route.query.chartName == 'scatter_map'){
                        CheckboxEchartData.bmap.mapStyle = seleData.default.styleJson;
                    }
                }
                var color = [];
                this.selectColorArr[index].itemArr.forEach((item,index) => {
                        color.push(item.background)
                })
                if(this.$route.query.chartName == 'thermo_map'){
                    CheckboxEchartData.visualMap.pieces.forEach((item,index) => {
                        item.color = color[index]
                    })
                }
                //console.log(CheckboxEchartData)
                CheckboxEchartData['color'] = color;
                this.createChart('echart', CheckboxEchartData)
                this.selectColorShow = false;
            },
            selectIconFun(){
                this.selectIconShow = !this.selectIconShow
            },
            selectOnlyIconFun(ind){
               this.selecIconCon = this.selectIconArr[ind].name;
               CheckboxEchartData.series[0]['symbol'] = this.selectIconArr[ind].value;
               if(this.symbolSize){
                CheckboxEchartData.series[0]['symbolSize'] = [this.symbolSize, this.symbolSize];
               }else{
                CheckboxEchartData.series[0]['symbolSize'] = [6, 6];
               }
               this.createChart('echart', CheckboxEchartData)
               this.selectIconShow = false
            },
            symbolSizeFun(){
               CheckboxEchartData.series[0]['symbolSize'] = [this.symbolSize, this.symbolSize];
               this.createChart('echart', CheckboxEchartData)
            },
            checkboxSmoothFun(mgs){
                //if(this.$route.query.chartName == 'multi_bar'){
                    var seriesItem = [];
                    this.ajaxData.forEach((item,index) => {
                        if(index>0){
                            item.forEach((items,ind) => {
                                if(ind>0){
                                    seriesItem.push(items)
                                }
                            })
                        }
                    })
                    
                    if(CheckboxEchartData.yAxis.type){
                            CheckboxEchartData.yAxis['min'] = seriesItem.reduce((a,b)=>{return b<a? b : a})
                            CheckboxEchartData.yAxis['max'] = seriesItem.reduce((a,b)=>{return b>a? b : a}) + 300;
                    }else if(CheckboxEchartData.yAxis[0]){
                        CheckboxEchartData.yAxis[0]['min'] = seriesItem.reduce((a,b)=>{return b<a? b : a});
                        CheckboxEchartData.yAxis[0]['max'] = seriesItem.reduce((a,b)=>{return b>a? b : a}) + 300
                    }
               // }
                switch(mgs) {
                    case 'smooth1':
                        this.smooth1 = !this.smooth1;
                        this.smooth2 = false;
                        break;
                    case 'smooth2':
                        this.smooth2 = !this.smooth2;
                        this.smooth1 = false;
                        break;
                    case 'scale1':
                        this.scale1 = !this.scale1;
                        this.scale2 = false;
                        break;
                    case 'scale2':
                        this.scale2 = !this.scale2;
                        this.scale1 = false;
                } 
                if(this.smooth1){
                    CheckboxEchartData.series.forEach((item,index) => {
                        item.smooth = false;
                    })
                }
                if(this.smooth2){
                    CheckboxEchartData.series.forEach((item,index) => {
                        item.smooth = true;
                    })
                }
                if(this.scale1){
                    if(CheckboxEchartData.yAxis.type){
                            CheckboxEchartData.yAxis['min'] = 0
                    }else if(CheckboxEchartData.yAxis[0]){
                        CheckboxEchartData.yAxis[0]['min'] = 0
                    }
                    if(CheckboxEchartData.yAxis.type){
                        CheckboxEchartData.yAxis['min'] = 0;
                    }else if(CheckboxEchartData.yAxis[0]){
                        CheckboxEchartData.yAxis[0]['min'] = 0
                    }
                    CheckboxEchartData.yAxis['scale'] = false; 
                }
                if(this.scale2){
                    CheckboxEchartData.yAxis['scale'] = true;
                }
                // var maxMinNum = this.maxMinNumFun(CheckboxEchartData)
                this.createChart('echart', CheckboxEchartData)
            },
            maxMinNumFun(CheckboxEchartData){
                var maxMinNum = [];
                CheckboxEchartData.series.forEach((item,index) => {
                    maxMinNum.push(Math.max.apply(null, item.data))
                })
                return maxMinNum
            },
            selectMinNUm(mgs){              
                if(CheckboxEchartData.yAxis.type){
                    if(CheckboxEchartData.yAxis.type == 'value'){
                        if(this.minNumber && this.maxNumber){
                            CheckboxEchartData.yAxis['min'] = this.minNumber
                            CheckboxEchartData.yAxis['max'] = this.maxNumber
                        }
                    }
                }else if(CheckboxEchartData.yAxis[0]){
                    if(this.minNumber && this.maxNumber){
                        CheckboxEchartData.yAxis[0]['min'] = this.minNumber
                        CheckboxEchartData.yAxis[0]['max'] = this.maxNumber
                    }
                }
                this.createChart('echart', CheckboxEchartData)
            },
            selectBarWidth(){
                if(this.barWidth){
                    CheckboxEchartData.series.forEach((item,index) => {
                        if(item.type){
                            if(item.type == 'bar'){
                                item['barWidth'] = this.barWidth;
                            }
                        }
                    })
                }
                this.createChart('echart', CheckboxEchartData)
            },
            selectPie(mgs){
                if(mgs == 'pieSize'){
                    CheckboxEchartData.series.forEach((item,index) => {
                        if(item.type){
                            if(item.type == 'pie'){
                                if(this.pieSize){
                                     if(this.pieSize.indexOf(",")!=-1){
                                        item['radius'] = this.pieSize.split(",");
                                     }else{
                                        item['radius'] = [this.pieSize,'50%'];
                                     }
                                }
                                
                            }
                        }
                    })
                }else{
                    CheckboxEchartData.series.forEach((item,index) => {
                        if(item.type){
                            if(item.type == 'pie'){
                                if(this.pieRaduis){
                                     if(this.pieRaduis.indexOf(",")!=-1){
                                        item['center'] = this.pieRaduis.split(",");
                                     }else{
                                        item['center'] = this.pieRaduis;
                                     }
                                }
                                
                            }
                        }
                    })
                }
                this.createChart('echart', CheckboxEchartData)
            },
            scatterFun(CheckboxEchartData){
                var typeEffect = [];
                var concatArr = [];
                var maxMinArr = [];
                CheckboxEchartData.series.forEach((item,index) => {
                        typeEffect.push(item.name)
                        if(item.name != 'Top 5'){
                            item.data.forEach((val,index) => {
                              concatArr.push(val)
                              if(val[0] - val[1]==0){
                                maxMinArr.push(val)
                              }
                            })
                        }
                })
                return {typeEffect:typeEffect,concatArr:concatArr,maxMinArr:maxMinArr}
            },
            scatterStyle(){
                var scatterFunObj = this.scatterFun(CheckboxEchartData);
                var typeEffect = scatterFunObj.typeEffect
                var concatArr = scatterFunObj.concatArr
                if(this.scatterNum){
                        if(typeEffect.indexOf('Top 5')!=-1){
                            CheckboxEchartData.series.forEach((item,index) => {
                                if(item.type=='effectScatter' && item.name == 'Top 5'){
                                    item.data = concatArr.sort(function (a, b) {
                                        return b[0] - a[0];
                                        }).slice(0, this.scatterNum)
                                    item.symbolSize = 15
                                }
                            })
                        }else{
                            var effec = {
                                name: 'Top 5',
                                type: 'effectScatter',
                                data: concatArr.sort(function (a, b) {
                                    return b[0] - a[0];
                                }).slice(0, this.scatterNum),
                                symbolSize: function (val) {
                                    return 15;
                                },
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowColor: 'rgba(120, 36, 50, 0.5)',
                                    shadowOffsetY: 5,
                                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                                        offset: 0,
                                        color: 'rgb(251, 118, 123)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(204, 46, 72)'
                                    }])
                                }
                           }
                           CheckboxEchartData.series.push(effec)
                        }
                }else{
                   this.noScatterStyle()
                }
            },
            noScatterStyle(){
                var scatterFunObj = this.scatterFun(CheckboxEchartData);
                var typeEffect = scatterFunObj.typeEffect
                var concatArr = scatterFunObj.concatArr
                    if(typeEffect.indexOf('Top 5')!=-1){
                            CheckboxEchartData.series.forEach((item,index) => {
                                if(item.type=='effectScatter' && item.name == 'Top 5'){
                                    item.symbolSize = 0
                                    item.data = concatArr.sort(function (a, b) {
                                            return b[0] - a[0];
                                    })
                                }
                            })
                    }else{
                        var effec = {
                            name: 'Top 5',
                            type: 'effectScatter',
                            data: concatArr.sort(function (a, b) {
                                return b[0] - a[0];
                            }),
                            symbolSize: function (val) {
                                return 0;
                            },
                            itemStyle: {
                                shadowBlur: 10,
                                shadowColor: 'rgba(120, 36, 50, 0.5)',
                                shadowOffsetY: 5,
                                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                                    offset: 0,
                                    color: 'rgb(251, 118, 123)'
                                }, {
                                    offset: 1,
                                    color: 'rgb(204, 46, 72)'
                                }])
                            }
                        }
                        CheckboxEchartData.series.push(effec)
                    }
            },
            checkboxScatterFun(mgs){
                var scatterFunObj = this.scatterFun(CheckboxEchartData);
                var typeEffect = scatterFunObj.typeEffect
                var concatArr = scatterFunObj.concatArr
                var maxMinArr = scatterFunObj.maxMinArr;
                switch(mgs){
                    case 'scatterHight1':
                        this.scatterHight1 = !this.scatterHight1;
                        this.scatterHight2 = false
                        break;
                    case 'scatterHight2':
                        this.scatterHight2 = !this.scatterHight2;
                        this.scatterHight1 = false
                        break;
                }
                if(this.scatterHight1){
                        if(typeEffect.indexOf('Top 5')!=-1){
                            CheckboxEchartData.series.forEach((item,index) => {
                                if(item.type=='effectScatter' && item.name == 'Top 5'){
                                    item.data = maxMinArr.sort(function (a, b) {
                                            return b[0] - a[0];
                                    })
                                    //item.data = concatArr
                                    item.symbolSize = 15
                                }
                            })
                        }else{
                            var effec = {
                                name: 'Top 5',
                                type: 'effectScatter',
                                data: maxMinArr.sort(function (a, b) {
                                            return b[0] - a[0];
                                    }),
                                symbolSize: function (val) {
                                    return 15;
                                },
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowColor: 'rgba(120, 36, 50, 0.5)',
                                    shadowOffsetY: 5,
                                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                                        offset: 0,
                                        color: 'rgb(251, 118, 123)'
                                    }, {
                                        offset: 1,
                                        color: 'rgb(204, 46, 72)'
                                    }])
                                }
                           }
                           CheckboxEchartData.series.push(effec)
                        }
                }else if(this.scatterHight2){
                    this.scatterStyle()
                }else{
                    this.noScatterStyle()
                }
                this.createChart('echart', CheckboxEchartData)
            },
            selectScatter(){
                if(this.scatterHight2){
                    this.scatterStyle()
                }else{
                    this.noScatterStyle()
                }
                this.createChart('echart', CheckboxEchartData)
            },
            handleSelectCon(){
                this.selectColorShow = false;
                this.selectIconShow = false;
            },
            selecteChartType(){
                if(this.echartType){
                    CheckboxEchartData['title']['text'] = this.echartType;
                    this.createChart('echart', CheckboxEchartData)
                }
            }
            
        },
        created() {
        },
        watch:{
            //
            disabledSingle(val, oldVal) {
                //console.log("inputVal = " + val + " , oldValue = " + oldVal)
                if(val){
                    if(this.$route.query.chartName == 'basic_funnel'){
                        CheckboxEchartData.series[0].sort = val;
                    }else{
                        CheckboxEchartData.series.forEach((item,index) => {
                            item.sort = val;
                        })
                    }
                    this.createChart('echart', CheckboxEchartData)
                }
            },
            barShadow(val){
                if(val){
                    CheckboxEchartData.tooltip.axisPointer.type= val;
                    this.createChart('echart', CheckboxEchartData)
                }
            },
            symbolSize(val){
                if(val){
                    CheckboxEchartData.series[0]['symbolSize'] = [val, val];
                    this.createChart('echart', CheckboxEchartData)
                }
            }
        },
    }
</script>
<style scoped>
    .btnOperation{
        height: 27px;
    }
    .btnMargin{
        margin-left: 1.125rem;
    }
    .ivu-icon-dataExplore{
        width: 16px;
        height: 16px;
        background: url("../../../assets/dataExplore.png") no-repeat;
        background-size: 100%;
        position: relative;
        display: inline-block;
        top: 2px;
    }
    .dimensionTop{
        margin-top: 50px;
        margin-bottom: 30px;
        font-size: 16px;
    }
    .dimensionTop span{
        color: #0e7fff;
    }
    .perAttr{
        color: #515a6d;
        font-size: 16px;
        margin-bottom: 20px;
        line-height: 45px;
    }
    .perAttrCon{
     width: 152px;
     height: 45px;
     background: #f4f7ff;
     margin-left: 6px;
     padding-left: 11px;
     line-height: 45px;
    }
    .perAttrCon a.selected {
    border: 1px solid #5c8bff;
    }
    .perAttrCon a {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0px 5px;
    border-radius: 2px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    background: #fff;
    }
    .perAttrCon a.default span {
    background: #c23531;
    background: -o-linear-gradient(315deg, #de7e7b 0%, #c23531 50%, #2f4554 51%, #547b95 100%);
    background: linear-gradient(135deg, #de7e7b 0%, #c23531 50%, #2f4554 51%, #547b95 100%);
    }
    .perAttrCon a span {
    display: inline-block;
    width: 26px;
    height: 26px;
    margin-left: 2px;
    margin-top: 2px;
    }
    .perAttrCon a.light span {
    background: #37A2DA;
    background: -o-linear-gradient(315deg, #8dcaea 0%, #37A2DA 50%, #ffd85c 51%, #fff0c2 100%);
    background: linear-gradient(135deg, #8dcaea 0%, #37A2DA 50%, #ffd85c 51%, #fff0c2 100%);
    }
.perAttrCon a.dark span {
    background: #dd6b66;
    background: -o-linear-gradient(315deg, #f0bcb9 0%, #dd6b66 50%, #759aa0 51%, #b1c6ca 100%);
    background: linear-gradient(135deg, #f0bcb9 0%, #dd6b66 50%, #759aa0 51%, #b1c6ca 100%);
}
.direction{
  display: inline-block;
  background: url("../../../assets/direction.png") no-repeat;
  width: 35px;
  height: 35px;
  margin-top: -9px;
  cursor: pointer;
}
.directionCent{
    background-position: -1px -78px;
    margin-left: -6px;
    margin-right: -6px;
}
.directionCent:hover,.directionCent.active{
    background-position: -46px -78px;
}
.directionRight{
    background-position: -1px -36px;
}
.directionRight:hover,.directionRight.active{
    background-position: -47px -36px;
}
.directionLeft:hover,.directionLeft.active{
    background-position: -46px 0px;
    margin-right: -1px;
}
.selectColor{
    width: 152px;
    border: 1px solid #dddee2;
    height: 28px;
    border-radius: 5px;
    margin-left: 10px;
    margin-top: 5px;
}
.selectPosition ul{
    list-style: none;
    background: #fff;
    border: 1px solid #dddee2;
    border-radius: 4px;
    position: relative;
    z-index: 100;
    max-height: 212px;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    overflow-y: scroll;
    top: 2px;
}
.selectPosition ul::-webkit-scrollbar {/*滚动条整体样式*/
        width: 2px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
}
.selectPosition ul li{
   text-align: center;
   cursor: pointer;
}
.selectPosition ul li span{
    width: 20px;
    height: 20px;
    margin-left: 2px;
    margin-right: 2px;
    display: inline-block;
    border-radius: 3px;
    margin-top: 4px;
    cursor: pointer;
}
.checkColor{
    line-height: 26px;
    padding-left: 6px;
}
.iconPosition{
    float: right;
    margin-top: 6px;
    margin-right: 5px;
    cursor: pointer;
}
</style>
<style>
    .dimensionContent .ivu-select-single .ivu-select-selection .ivu-select-placeholder, .ivu-select-single .ivu-select-selection .ivu-select-selected-value{
        line-height: 45px;
        height: 45px;
    }
    .dimensionContent .ivu-select-single .ivu-select-selection{
        height: 45px;
    }
    .dimensionContent .setingIcon{
    float: right;
    background: #5c8cff;
    color: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    line-height: 1.2;
    }
    .ivu-input-icon{
        height: 26px;
        line-height: 26px;
    }
    .ivu-input{
        height: 26px;
    }
    .ivu-color-picker-color{
        top: -1px;
    }
</style>